<template>
  <div class="ticker">
    <!-- 导航栏 -->
    <div class="list-nav">
      <swiper :options="swiperOption" ref="mySwipers">
        <swiper-slide v-for="(slide,index) in list" :key="index" @click.native='clickIndex(index)' :class="{isActive:index==saveIndex}">{{ slide.name }}</swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <div class="search-text clearfix" :class="{border:isFocus}">
        <span style="vertical-align: middle;">
          <i class="fa  fa-search fa-lg" style="color:#ccc;font-weight:lighter;"></i>
        </span>
        <input type='text' placeholder='请搜索' v-model.trim='searchText' @focus="focus" />
        <span style="font-size:25px;vertical-align: middle;" v-show="isFocus" @click='clearSearch'>x</span>
      </div>
      <span @click='searchResult'>搜索</span>
    </div>
    <!-- 数据列表 -->
    <div class="list">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column type="index" width="40">
        </el-table-column>
        <el-table-column label="币名" width="120">
          <template slot-scope="scope">
            <div class="logo">
              <img :src="scope.row.logo " alt="" width="20">
              <p>
                <span>{{ scope.row.currency }}<br>{{ scope.row.alias||scope.row.name }}</span>
              </p>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="market_cap_usd" label="流通市值" width="150">
          <template slot-scope="scope">
            <span>${{ scope.row.market_cap_usd }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price_display" label="人民币价格" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.price_display }}亿</span>
          </template>
        </el-table-column>
        <el-table-column label="涨幅（今日）" width="150" sortable prop="percent_change_display">
          <template slot-scope="scope">
            <span :style="{color: Number(scope.row.percent_change_display) >=0? 'green' : 'red'}">{{ scope.row.percent_change_display| capitalize}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="volume_24h_cny" label="交易金额（24h）" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.volume_24h_cny }}亿</span>
            <span>{{ scope.row.anchor }}</span>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <ul class="page">
      <li @click="pageChange('first')">首页</li>
      <li @click="pageChange('pre')">上一页</li>
      <li @click="pageChange('next')">下一页</li>
    </ul>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import topMarketList from "./topmarketlist";
import currencyList from "./currencyList";
export default {
  name: "ticker",
  tableData: "",
  data() {
    return {
      swiperOption: {
        // 第一时间获取swiper对象
        notNextTick: true,
        //  手势
        grabCursor: true,
        //  flex布局
        setWrapperSize: true,

        paginationClickable: true,
        //  可用鼠标滑动
        mousewheelControl: true,

        observeParents: true,
        // 前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        slidesPerView: "5"
      },

      // 轮播图数据
      list: [],
      isActive: false,
      // 当前轮播图索引
      currentIndex: 0,
      //  保存当前索引
      saveIndex: 0,
      // 搜索内容
      searchText: "",
      // 当前页码

      // 是否获取焦点
      isFocus: false,

      currentPage: 1,
      // 列表数据
      tableData: [],
      //  提示信息
      message: ""
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwipers.swiper;
    }
  },
  filters: {
    capitalize: function(value) {
     if (value.indexOf("+")<0&& value.indexOf("-")<0) {
       return "+"+value;
     }
     return value;
    }
  },
  created() {
    var currentList = this.list.concat([{ name: "市值" }], topMarketList.list);

    this.list = currentList;
    // 累表数据
    this.tableData = currencyList.data.list;
  },
  methods: {
    // 获取当前索引
    clickIndex(index) {
      this.saveIndex = index;
      console.log(
        "this.clickedIndex:",
        this.$refs.mySwipers.swiper.clickedIndex
      );
    },
    // 获取焦点
    focus() {
      this.isFocus = true;
    },
    // 获取搜索结果
    searchResult() {
      let selectedDatas = this.tableData.filter(data => {
        let searchText = this.searchText;
        let nameHave = data.currency.indexOf(searchText) != -1;
        return nameHave;
      });
      this.tableData = selectedDatas;
    },
    // 清空搜索内容
    clearSearch() {
      this.searchText = "";
      this.isFocus = false;
    },
    // 页码提醒
    info(message) {
      var _this = this;
      this.$notify({
        message: _this.message,
        type: "warning"
      });
    },
    // 增加数据
    pageChange(pageSize) {
      var _this = this;
      if (_this.currentPage == 1) {
        if (pageSize == "next") {
          _this.message = "已到最后一页!";
          _this.info();
        } else {
          _this.message = "已到首页!";
          _this.info();
        }
      } else {
        switch (pageSize) {
          case "first":
            _this.currentPage = 1;
            break;
          case "pre":
            _this.currentPage -= 1;
            break;
          case "next":
            _this.currentPage += 1;
            break;
        }
        _this.myAjax();
      }
    },
    // 请求数据
    myAjax() {
      $.ajax({
        type: "GET",
        cache: false,
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        url: "htttp:///www.baidi.com",
        data: {
          pageSize: _this.pageSize
        },
        success: function(json) {},
        error: function(error) {}
      });
    }
  },
  mounted() {
    console.log("this.swiper:", this.$refs.mySwipers.swiper);
    // console.log('this.$ref.mySwipers.swiper.eventsListeners.onclick:',this.$ref.mySwipers.swiper.eventsListeners.onclick);
    // console.log('$(".swiper-slide-active"):',$('.swiper-slide-active'));
    // $('.swiper-slide-active').css({"color":'#007aff',"border-bottom":'1px solid #007aff'
    // });
  },

  components: { swiper, swiperSlide }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ticker {
  height: 100%;
  width: 100%;
  .list-nav {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.54);
    .swiper-slide {
      text-align: center;
    }

    .swiper-button-prev,
    .swiper-button-next {
      height: 20px;
      top: 78%;
    }
    .isActive {
      color: #007aff;
      border-bottom: 2px solid #007aff;
    }
  }
  .list {
    .logo {
      height: 100%;
      width: 100%;

      img {
        vertical-align: middle;
        margin-right: 5px;
      }
      p {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .search {
    width: 100%;
    height: 40px;
    line-height: 37px;
    padding-left: 10px;
    .search-text {
      height: 100%;
      float: left;
      width: 200px;
      margin-right: 20px;
      border-bottom: 2px solid #ccc;
      color: rgba(0, 0, 0, 0.87);
      input {
        border: none;
        background: none;
        text-indent: 10px;
        width: 150px;
        vertical-align: middle;
      }
    }
    .border {
      border-bottom: 2px solid #007aff;
    }
  }
  .page {
    width: 100%;
    height: 50px;
    li {
      float: left;
      width: 88px;
      margin: 10px;
      line-height: 36px;
      text-align: center;
      background: #fff;
      font-weight: 700;
      height: 36px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
      color: rgba(0, 0, 0, 0.87);
    }
  }
}
</style>